<template>
	<view class="content">
			<view class="uni-panel">
				<view class="uni-panel-left">
					<view class="uni-panel-item">
						<text class="uni-text-item">手机</text>
						<input class="uni-input" placeholder="请输入手机" v-model="username"/>
					</view>
					<view class="uni-panel-item">
						<text class="uni-text-item">姓名</text>
						<input class="uni-input" placeholder="请输入姓名" v-model="nickname"/>
					</view>
				</view>
				<view class="uni-panel-left">
					<view class="uni-panel-item">
						<text class="uni-text-item">密码</text>
						<input class="uni-input" placeholder="请输入密码" password="true" v-model="password"/>
					</view>
					<view class="uni-panel-item">
						<text class="uni-text-item">年龄</text>
						<input class="uni-input" type='number' placeholder="请输入年龄" v-model="age"/>
					</view>
				</view>
				<view class="uni-panel-left">	
					<view class="uni-panel-item">
						<text class="uni-text-item">密码</text>
						<input class="uni-input" placeholder="请再次输入密码" password="true" v-model="password1"/>
					</view>
					<view class="uni-panel-item">
						<text class="uni-text-item">性别</text>
						<input class="uni-input" placeholder="请输入性别" v-model="sex"/>
					</view>
				</view>
				<view class="uni-panel-item-right">
					<view class="uni-panel-check">
						<checkbox :checked="isChecked" @click="clickCheck"></checkbox>
						<view @click="clickYHXY">《用户协议》</view>
						<view @click="clickYSZC">《隐私政策》</view>
					</view>
					<view class="uni-panel-back" @click="btnBackClick">返回</view>
				</view>
				<button class="uni-btn-login" @click="btnLoginClick">注册</button>
			</view>
	</view>
</template>

<script>
	import { register } from '@/api/api.js';
	import store from "../../store";
	export default {
		mounted() {
		        // #ifdef APP-PLUS
		        plus.screen.lockOrientation('landscape');
		        // #endif
		    },
		data() {
			return {
				username: '',
				password: '',
				password1: '',
				nickname: '',
				age: '',
				sex: '',
				isChecked: false,
			}
		},
		methods: {
			validPhone(val) {
				return /^1[3456789]\d{9}$/.test(val);
			},
			btnLoginClick(){
				if( this.username == '' || !this.validPhone(this.username)){
					uni.showToast({
					    title: '请输入正确的手机',
						icon: 'none',
					    duration: 2000
					});
					return;
				}
				if( this.password == ''){
					uni.showToast({
					    title: '请输入密码',
						icon: 'error',
					    duration: 2000
					});
					return;
				}
				if( this.nickname == ''){
					uni.showToast({
					    title: '请输入姓名',
						icon: 'error',
					    duration: 2000
					});
					return;
				}
				if( this.password != this.password1){
					uni.showToast({
					    title: '两次输入的密码不一致',
						icon: 'none',
					    duration: 2000
					});
					return;
				}
				if(!this.isChecked){
					uni.showToast({
					    title: '请您先同意《隐私政策》和《用户协议》',
						icon: 'none',
					    duration: 2000
					});
					return;
				}
				let params = {username:this.username, 
								password:this.password, 
								nickname:this.nickname, 
								age:this.age,
								sex:this.sex};
				register(params).then(res => {
					console.log(res)
					if( res.code != 0){
						uni.showModal({
							title: '提示',
							content: res.msg,
						    showCancel: false
						});
					}else{
						uni.showToast({
						    title: '注册成功',
							icon: 'success',
						    duration: 2000
						});
					}
				}).catch(err => {
					uni.showToast({
					    title: err,
						icon: 'none',
					    duration: 2000
					});
				});
			},
			btnBackClick(){
				uni.navigateBack()
			},
			clickCheck(){
				this.isChecked = !this.isChecked;
			},
			clickYSZC(){
				uni.navigateTo({
					url: '/pages/webview/index?url=' + decodeURIComponent('/upload/yszc.html')
				})
			},
			clickYHXY(){
				uni.navigateTo({
					url: '/pages/webview/index?url=' + decodeURIComponent('/upload/yhxy.html')
				})
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
	.content {
		width: 100%;
		height: 100%;
		background-image: url('../../static/img/registe.jpg');
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.uni-image {
		width: 50%;
	}
	.uni-image-logo {
		width: 20%;
	}
	.uni-panel {
		margin-left: 45%;
		margin-top: 17%;
		width: 50%;
		height: 55%;
		display: flex;
		flex-direction: column;
	}
	.uni-panel-left {
		width: 100%;
		height: 10vmin;
		display: flex;
		flex-direction: row;
	}
	
	.uni-panel-item {
		display: flex;
		align-items: center;
		width: 50%;
		margin-top: 3%;
		margin-left: 1%;
		font-size: 5vmin;
	}
	
	.uni-panel-item-right {
		display: flex;
		flex-direction: row;
		margin-top: 3%;
		font-size: 5vmin;
		justify-content: space-between;
	}
	.uni-panel-check{
		width: 70%;
		height: 100%;
		display: flex;
		flex-direction: row;
		color: orange;
		font-size: 4vmin;
	}
	
	.uni-input{
		font-size: 4vmin;
		width: 55vmin;
	}
	
	.uni-text-item{
		width: 20vmin;
		height: 100%;
		text-align: center;
	}
	
	.uni-btn-login {
		margin-top: 3%;
		background-color: royalblue;
		width: 80%;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
	}
	
	
	
</style>
